<script>
import {mapState} from "vuex";

export default {
  name: "permissions",
  data() {
    return {
      /* 表单数据对象 */
      formData: {
        name: '',
        code: '',
        description: '',
        type: '',
        pid: '',
        enVisible: '',
      },
      /* 表单规则对象 */
      formRules: {
        name: [
          {required: true, message: '请输入权限名称', trigger: 'blur'}
        ],
        code: [
          {required: true, message: '请输入权限标识', trigger: 'blur'}
        ],
        description: [
          {required: true, message: '请输入权限描述', trigger: 'blur'}
        ],
      },
      /* 是否显示添加或编辑权限的对话框组件 */
      showPerDialog: false
    }
  },
  methods: {
    /*  fetchPermission()函数的作用用于派发action获取权限列表 */
    async fetchPermission() {
      try {
        await this.$store.dispatch('permissionsStore/fetchPermissionList')
      } catch (error) {
        this.$message.success(error.message)
      }
    },
    /*  doAddPermission()派发action发送添加权限的请求 */
    async doAddPermission() {
      try {
        const message = await this.$store.dispatch('permissionsStore/addPermission', this.formData)
        this.$message.success(message)
        this.showPerDialog = false
        this.fetchPermission()
      } catch (error) {
        this.$message.error(error.message)
      }
    },
    /* doEditPermission()派发action发送编辑权限的请求 */
    async doEditPermission() {
      try {
        const message = await this.$store.dispatch('permissionsStore/updatePermission', this.formData)
        this.$message.success(message)
        this.showPerDialog = false
        this.fetchPermission()
      } catch (error) {
        this.$message.error(error.message)
      }
    },
    /* 点击编辑权限按钮的回调函数 */
    async handleEditPermission(permissions) {
      /* const permissionsInfo = await this.$store.dispatch('permissionsStore/findPermission', permissions.id)
       this.formData = permissionsInfo
       this.showPerDialog = true*/
      this.showPerDialog = true
      this.formData = JSON.parse(JSON.stringify(permissions))
    },
    /* 点击删除权限按钮的回调函数 */
    async handleDeletePermission(permission) {
      const confirm = await this.$confirm(`删除${permission.name}, 是否继续?`, '提示', {type: 'warning'}).catch(error => error)
      if (confirm === "cancel") return
      try {
        const message = await this.$store.dispatch('permissionsStore/deletePermission', permission.id)
        await this.$store.dispatch('permissionsStore/fetchPermissionList')
        this.$message.success(message)
      } catch (error) {
        this.$message.error(error.message)
      }
    },
    /* 点击添加权限按钮的回调函数(页面级别和按钮级别)
    * type:1为页面路由权限点, 2为按钮权限点
    * pid:页面权限点pid值为'0', 按钮权限点的值为所属页面权限点的id值
    * */
    async handleAddPermission(type, pid) {
      this.formData.type = type
      this.formData.pid = pid
      this.showPerDialog = true
    },
    /* 清空表单数据和重置表单的回调函数 */
    clearFormData() {
      this.formData = {name: '', code: '', description: '', type: '', pid: '', enVisible: ''}
      this.$refs.form.resetFields()
    },
    /* 对话框关闭时的回调函数 */
    handleClose() {
      this.showPerDialog = false
      this.clearFormData()
    },
    /* 点击确定按钮的回调函数 */
    async handleSubmit() {
      const valid = await this.$refs.form.validate().catch(error => error)
      if (!valid) return
      if (this.formData.id) {
        this.doEditPermission()
      } else {
        this.doAddPermission()
      }
    },
    /* 点击取消按钮的回调函数 */
    handleCancel() {
      this.showPerDialog = false
    }
  },
  computed: {
    /* 使用mapState将permissionsStore模块下的state映射位组件实例的属性 */
    ...mapState('permissionsStore', ['permissionList']),
    /* 对话框的标题 */
    title() {
      return this.formData.id ? '编辑权限' : '添加权限'
    }
  },
  mounted() {
    /* 组件挂载完毕调用fetchPermission()派发action获取权限列表 */
    this.fetchPermission()
  }
}
</script>

<template>
  <div class="permissions">
    <el-card>
      <el-button type="primary" icon="el-icon-plus" @click="handleAddPermission(1,'0')">添加权限</el-button>
      <el-table border stripe :data="permissionList" row-key="id">
        <el-table-column prop="name" label="权限名称" align="center"></el-table-column>
        <el-table-column prop="code" label="权限标识" align="center"></el-table-column>
        <el-table-column prop="description" label="权限描述" align="center"></el-table-column>
        <el-table-column label="权限级别" align="center">
          <template #default="{row}">
            <el-tag effect="dark" v-if="row.type===1">页面级别权限</el-tag>
            <el-tag effect="dark" type="success" v-if="row.type===2">按钮级别权限</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="" label="操作" align="center">
          <template #default="{row}">
            <el-button type="primary" icon="el-icon-plus" v-if="row.type===1" @click="handleAddPermission(2,row.id)">添加权限</el-button>
            <el-button type="warning" icon="el-icon-edit" @click="handleEditPermission(row)">编辑权限</el-button>
            <el-button type="danger" icon="el-icon-delete" @click="handleDeletePermission(row)">删除权限</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--添加或者编辑权限的对话框组件-->
      <el-dialog :title="title" :visible.sync="showPerDialog" @close="handleClose">
        <el-form ref="form" :model="formData" :rules="formRules" label-width="100px">
          <el-form-item label="权限名称" prop="name">
            <el-input v-model="formData.name" placeholder="请输入权限名称"></el-input>
          </el-form-item>
          <el-form-item label="权限标识" prop="code">
            <el-input v-model="formData.code" placeholder="请输入权限标识"></el-input>
          </el-form-item>
          <el-form-item label="权限描述" prop="description">
            <el-input type="textarea" v-model="formData.description" placeholder="请输入权限描述"></el-input>
          </el-form-item>
          <el-form-item label="权限启用" prop="enVisible">
            <el-switch v-model="formData.enVisible" active-text="启用" inactive-text="禁用" active-value="1" inactive-value="0"></el-switch>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button type="danger" @click="handleCancel">取 消</el-button>
          <el-button type="primary" @click="handleSubmit">确 定</el-button>
         </span>
      </el-dialog>
    </el-card>
  </div>
</template>

<style scoped lang="scss">
.permissions {
  .el-card {
    margin-top: 10px;
  }

  .el-table {
    margin-top: 10px;
  }
}
</style>
